<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'

interface ScopeType {
  row: User
  $index: number
}
interface User {
  date: string
  name: string
  address: string
}

function handleEdit(index: number, row: User) {
  console.log(index, row)
}
function handleDelete(index: number, row: User) {
  console.log(index, row)
}

const tableData = ref<User[]>([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
function onAddItem() {
  tableData.value.push({
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  })
}
</script>

<template>
  <el-table :data="tableData" w-full>
    <!-- col1 -->
    <el-table-column label="Date" width="150">
      <template #default="scope: ScopeType">
        <div flex items-center>
          <!-- 字段? -->
          <el-icon><Timer /></el-icon>
          <span ml-10px>{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <!-- col2 -->
    <el-table-column label="Name" width="120">
      <template #default="scope: ScopeType">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <ElTag>{{ scope.row.name }}</ElTag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- col3 -->
    <el-table-column label="Operations">
      <template #default="scope: ScopeType">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button class="mt-4 w-full" @click="onAddItem">
    Add Item
  </el-button>
</template>
